<template>
  <div>
    <div class="topic">公告</div>
    <postlist :posts="announcements"
              :isAnnouncement="1"
              id="announcementList"></postlist>
    <el-divider />
    <div class="topic">板块</div>
    <div style="margin: 20px;">
      <el-row :gutter="20">
        <el-col :lg="6"
                :sm="8"
                :xs="12"
                v-for="(item, index) in forums2"
                :key="index">
          <router-link class="card-router-link"
                       :to="{path: '/forum', query:{id: item.partitionID, name: item.partitionName}}">
            <el-card class="forum-card">
              {{item.partitionName}}
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </div>

    <!-- 管理员可用 发布公告 -->
    <div v-if="login && userPower !== 0"
         style="margin: 10px;">
      <el-divider />
      <div class="topic">发布公告（管理员功能）</div>
      <el-input v-model="newNoticeTitle"
                placeholder="请输入公告标题"
                size="small"
                style="margin-bottom: 10px; width: 800px;"></el-input>
      <wangeditor v-model="newNoticeContent"
                  ref='editor'></wangeditor>
      <el-button type="primary"
                 style="margin-top: 10px;"
                 @click="newNotice">发布</el-button>

    </div>
  </div>
</template>

<script>
import postlist from '../components/PostList.vue'
import wangeditor from '../components/WangEditor.vue'

export default {
  name: 'Home',
  components: {
    postlist,
    wangeditor
  },
  data () {
    return {
      announcements: [],
      forums: [],
      test: '',
      newNoticeContent: '',
      newNoticeTitle: ''
    }
  },
  computed: {
    login () {
      return this.$store.getters.loginState
    },
    userPower () {
      return this.$store.getters.userPower
    },
    forums2 () {
      return this.forums.filter((item) => {
        return item.partitionID !== 0
      })
    }
  },
  mounted () {
    // get parts
    this.axios.get('getpart')
      .then(response => {
        if (response.status === 200) {
          if (response.data.err === 200) {
            console.log('get parts succeeded')
            this.forums = response.data.partList
          } else {
            this.$notify({
              title: '获取分区失败',
              message: response.message,
              position: 'top-left'
            })
          }
        } else {
          this.$notify({
            title: '获取分区失败',
            message: '网络错误',
            position: 'top-left'
          })
        }
      })
      .catch(error => {
        console.log(error)
      })

    // get announcements
    this.getNoticeList()
  },
  methods: {
    newNotice () {
      console.log('newNotice')
      this.axios.post('addnotice', {
        userID: this.$store.getters.userID,
        title: this.newNoticeTitle,
        content: this.newNoticeContent,
        partitionID: 0 // home notice
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.$notify({
                title: '发布公告成功',
                position: 'top-left'
              })
              this.$refs.editor.clear()
              this.newNoticeTitle = ''
              this.getNoticeList()
              window.scrollTo(0, 0)
            } else if (response.data.err === 2) {
              this.$notify({
                title: '发布公告失败',
                message: '您的权限不足',
                position: 'top-left'
              })
              this.newNoticeTitle = ''
              this.$refs.editor.clear()
              this.$store.commit('setPower', response.data.userPower)
            } else if (response.data.err === 3) {
              this.$notify({
                title: '发布公告失败',
                message: '您的帐号已被封禁，已退出登录',
                position: 'top-left'
              })
              this.newNoticeTitle = ''
              this.$refs.editor.logout()
              this.$store.commit('logout')
            } else {
              this.$notify({
                title: '发布公告失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '发布公告失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getNoticeList () {
      var announcementList = document.getElementById('announcementList')
      const announcementsLoading = this.$loading.service({
        target: announcementList
      })
      this.axios.post('getnotice', {
        partitionID: 0
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              console.log('get announcements succeeded')
              announcementsLoading.close()
              this.announcements = response.data.noticeList
            } else {
              this.$notify({
                title: '获取公告失败',
                message: response.data.message,
                position: 'top-left'
              })
              announcementsLoading.close()
            }
          } else {
            this.$notify({
              title: '获取公告失败',
              message: '网络错误',
              position: 'top-left'
            })
            announcementsLoading.close()
          }
        })
        .catch(error => {
          console.log(error)
          announcementsLoading.close()
        })
    }
  }
}
</script>

<style>
.topic {
  margin: 10px;
  font-weight: bold;
  font-size: 20px;
  color: #303133;
}
.el-col {
  text-align: center;
  margin-bottom: 20px;
}
.card-router-link {
  text-decoration: none;
}
.forum-card {
  font-size: 17px;
  text-align: center;
  color: #606266;
}
</style>
